<template>
    <view class="details">
        <SRV-topbar title="赠品领取列表" isLeft="true"></SRV-topbar>
        <view class="line" v-for="(item,index) in list" :key="index">
            <view style="position: relative;">
                <view class="list-btn">
                    <view>{{item.sn}}</view>
                    <view :class="'btn ' + item2.type" v-for="(item2,index2) in item.btn" :key="index2" @click="operateFun(index, item2.type)">{{item2.name}}</view>
                </view>
                <view class="list-box">
                    <view class="list-left"> 领取范围：{{item.begin_date}} - {{item.end_date}} </view>
                    <view class="list-right"> {{item.status_name}} </view>
                </view>
            </view>
        </view>
        <view v-if="list.length == 0" class="nocontent">
            <image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/base.png" mode="widthFix"></image>
            <text>暂无记录～</text>
        </view>
        <uni-popup ref="info" type="bottom">
        	<view class="pay_type">
        		<image @click="close" class="close" :src="'https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png'" mode="aspectFill"></image>
        		<view class="title">领取详情</view>
        		<view class="columbTitle" v-if="info.merchant.isShow">领取店铺</view>
        		<view class="list-box" v-if="info.merchant.isShow">
        		    <view class="list-left"> {{info.merchant.title}} </view>
        		    <view class="list-right"> {{info.merchant.mobile}} </view>
        		</view>
        		<view  class="list-box" v-if="info.merchant.isShow">{{info.merchant.address}}</view>
        		<view class="columbTitle" v-if="info.is_use">领取商品</view>
        		<view class="list-box" v-if="info.is_use">
        		    <view class="list-left"><image :src="info.prize.picture" style="width:80rpx;height: 80rpx;" /> </view>
        		    <view class="list-right">{{info.prize.name}} </view>
        		</view>
        		<view class="columbTitle" v-if="info.use_time != ''">领取时间：{{info.use_time}}</view>
        	</view>
        </uni-popup>
        <uni-popup ref="subscribe" type="bottom">
        	<view class="pay_type">
        		<image @click="close" class="close" :src="'https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png'" mode="aspectFill"></image>
        		<view class="title">预约领取</view>
        		<view class="merchant" v-for="(item,index) in merchantList" :key="index">
        			<view :class="merchantId == item.id ? 'sel' : 'nosel'" @click="selFun(item.id)"></view>
        			<view class="left_item"><image :src="item.picture"></image></view>
        			<view class="right_item">
        				<view class="right_con">
        					<view class="oneline">
        						<text>{{item.title}}</text>
        					</view>
        				</view>
        				<view class="right_con">{{item.mobile}}</view>
        				<view class="right_con">{{item.address}}</view>
        			</view>
        		</view>
        		<view :style="'height:' + bottomHeight + 'rpx;'" class="pay_bot" @click="subScribe()">确认预约</view>
        	</view>
        </uni-popup>
    </view>
</template>

<script>
    var _self;
    import serve from '../../static/request.js';
    import storage from '../../static/appkey.js';
    import common from '../../static/jump.js';
    export default {
        data() {
            return {
                id: 0,
                list: [],
                info: {},
                merchantList: [],
                selId: 0,
                merchantId: 0,
				bottomHeight: 110, /* 底部按钮高度，避免iPhonex导航黑条 */
            }
        },
        methods: {
            getList() {
                serve.request({
                    url: '/member/gift/log-list',
                    data:  {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        id: _self.id
                    },
                    v: '/v2'
                }).then(res => {
                    _self.list = res.data;
                });
            },
            getMerchantList() {
                serve.request({
                    url: '/member/gift/merchant-list',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                    },
                    v: '/v2'
                }).then(res => {
                    _self.merchantList = res.data;
                    if(_self.merchantId == 0) {
                        _self.merchantId = _self.merchantList[0].id;
                    }
                    _self.$refs.subscribe.open();
                    return ;
                });
            },
            close() {
                _self.$refs.info.close();
                _self.$refs.subscribe.close();
            },
			selFun(sk) {
                _self.merchantId = sk;
			},
            subScribe() {
                serve.request({
                    url: '/member/gift/sub-scribe',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                		merchantId: _self.merchantId,
                		id: _self.selId
                    },
                    v: '/v2',
                }).then(res => {
                	var resCode = res.code;
                	uni.showModal({
                		title: '温馨提示',
                		content: res.message,
                		showCancel:false,
                		success: function(res) {
                			if (res.confirm && resCode == 200) {
                				_self.getList();
                                _self.close();
                			}
                		}
                	});
                	return ;
                });
            },
            operateFun(index, type) {
                if(type == 'info') {
                    _self.info = _self.list[index];
                    _self.$refs.info.open();
                }
                if(type == 'subscribe') {
                    _self.selId = _self.list[index].id;
                    _self.merchantId = _self.list[index].merchant.id;
                    if(_self.merchantList.length > 0) {
                        _self.$refs.subscribe.open();
                        return ;
                    }
                    _self.getMerchantList();
                    
                }
                _self.$forceUpdate();
                return ;
            },
        },
        onLoad(options) {
			_self = this;
			if (uni.getSystemInfoSync().safeAreaInsets.top > 20) {
				_self.bottomHeight = 150;
			}
            _self.id = options.id || 0;
            _self.getList();
        },
        onPullDownRefresh() {
            _self.getList();
        }
    }
</script>

<style scoped lang="scss">
    .details {
        width: 100%;
        padding-bottom: 50rpx;
        .line {
            border: 2rpx solid #aaaaaa;
            margin: 20rpx;
        }
        
        .list-btn {
            display: flex;
            justify-content: space-between;
            padding: 20rpx;
            border-bottom: 1rpx solid #aaaaaa;
        }
        
        .btn {
            margin-right: 20rpx;
            padding: 8rpx 20rpx;
            border: 1rpx solid #e69a64;
            border-radius: 20rpx;
            background: #e69a64;
        }
        
        .info {
            border: 1rpx solid #a9a9ec;
            background: #a9a9ec;
        }

        .list-box {
            border-bottom: 2rpx solid #eaeaea;
            display: flex;
            justify-content: space-between;
            align-content: center;
            padding: 30rpx 20rpx;

            image {
                width: 40upx;
                height: 40upx;
                margin-right: 20rpx;
            }
        }

        .columbTitle {
            padding: 20rpx;
            font-size: 40rpx;
            border-bottom: 2rpx solid #ccc;
        }
        
        .pay_type{
        	position: relative;
        	width: 100%;
        	background: #FFFFFF;
        	padding-bottom: 140upx;
        	.close{
        		position: absolute;
        		width:23upx;
        		height:23upx;
        		right: 40upx;
        		top: 45upx;
        	}
        	.title{
        		width: 100%;
        		text-align: center;
        		height: 100upx;
        		line-height: 100upx;
        		font-size: 36upx;
        		border-bottom: 1upx #EBECF0 solid;
        	}
            .pay_bot {
              width: 100%;
              position: fixed;
              left: 0;
              bottom: 0;
              height: 100upx;
              background: #FFBC00;
              color: #fff;
              font-size: 32upx;
              line-height: 100upx;
              text-align: center;
              border-radius: 0;
              &::after{
                  border: none;
              }
            }
        }
        .merchant{
			display: flex;
			box-sizing: border-box;
			align-items: flex-start;
			padding: 20rpx;
			border-bottom: 1px solid #ebebeb;    
		    position: relative;
			.left_item {						
				margin-left: 15rpx;
				image {
					width:180rpx;
					height:180rpx;
				}
			}
			
			.right_item {
				flex: 1;						
				margin-left: 15rpx;
				.right_con{
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					white-space:unset;
					.oneline{
						
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
						white-space:unset;
					}
					.name{
						display: initial;
						max-width: 300rpx;
						font-size: 34rpx;
					}
					.rate{
						color: #FFBC00;
						font-size: 30rpx;
						margin-top: 10rpx;
					}
		            .market{
		                color: #5f5b5b;
		                font-size: 30rpx;
		                margin-top: 10rpx;
		                text-decoration: line-through;
		            }
					.state{
						display: initial;
					    padding: 5rpx 8rpx;
					    text-align: center;
					    color: #FFFFFF;
					    font-size: 32rpx;
					    border-radius:2rpx;
					    margin-right: 10rpx;
					}
				}
		        .sales {
		            display: flex;
		            align-items: center;
		            font-size: 28upx;
		                
		            image {
		                width: 36upx;
		                height: 36upx;
		                margin-right: 12upx;
		            }
		        }
			}
		}
        .sel {
        	background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/xuanzhong.png);
        	background-repeat: no-repeat;
        	width: 40rpx;
        	height: 40rpx;
        	background-size: 100%;
        	margin-top: 8%;
        }
        
        .nosel {
        	width: 36rpx;
        	height: 36rpx;
        	border: 1rpx solid #999999;
        	border-radius: 50%; 
        	margin-top: 8%;
        }
        .nocontent {
            width: 100%;
            padding-top: 338upx;
            display: flex;
            flex-direction: column;
            align-items: center;

            image {
                width: 125upx;
                height: 124upx;
            }

            text {
                font-size: 28upx;
                color: rgba(204, 204, 204, 1);
                margin-top: 30upx;
            }
        }
    }
</style>
